<#assign base=request.contextPath />

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${base}/img/asset-favicon.ico">
    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/plugins/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-index.css"/>
    <link rel="stylesheet" href="${base}/css/loading.css"/>


    <title>在线教育网</title>
</head>


<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<!-- 页面头部 -->
<!--头部导航-->
<#include "header.ftl" />

<!--轮播图-->
<div class="banner-roll">
    <div id="picture-carousel" class="banner-item">
        <!---->
        <div class="item" v-for="carousel in carousels"
             v-bind:style="{backgroundImage:'url(' + carousel.picture + ')'}"></div>
    </div>
    <div class="indicators"></div>
</div>
<!--轮播图/-->

<div class="container">
    <!--左侧列表导航-->
    <div class="travel-index-nav">
        <div class="citylistbox" id="groupList">
            <div class="listbox" v-for="group in groups" :key="group.id">
                <div class="list">
                    <dl>
                        <dt v-text="group.name"><!--{{group.name}}--></dt>
                    </dl>
                </div>
                <div class="box">
                <#--这里填充详细内容-->
                </div>
            </div>
        </div>
    </div>


    <!--兴趣栏-->
    <div class="recommend-list" id="recommend-list">
        <div class="btn-group btn-group-justified">
            <li id="classify" class="btn btn-primary title"><a>精品推荐</a></li>

            <li class="btn btn-primary recommend-btn" v-for="recommend in recommends"
                @click="link(recommend.id)">
                <a v-text="recommend.name"> <!--{{recommend.name}}--></a>
            </li>
        <#--<li id="loading" class="btn btn-primary"><img src="${base}/img/loading2.gif"></li>-->

            <li class="btn btn-primary"><a>换一批</a></li>
        </div>
    </div>
    <!--兴趣栏/-->

    <!--推荐分组-->
    <div class="conten-list">
        <!--精品推荐1-->
        <div class="Recommend">
            <div class="title">
                精品推荐
                <a href="course/list" target="_blank" rel="noopener noreferrer">查看全部</a>
            </div>
            <div class="content" id="recommend">
                <div class="recom-item" v-for="(item,index) in items" :key="item.id">
                    <a @click="link(item.id)">
                        <p>
                            <img :src="item.picture" width="100%" alt="">
                            <span class="lab" v-if="index<4">HOT</span>
                        </p>
                        <ul>
                            <li v-text="item.name"><!--{{item.name}}--></li>
                            <li>
                                <span v-if="item.level==1">初级</span>
                                <span v-else-if="item.level==2">中级</span>
                                <span v-else-if="item.level==3">高级</span>
                                <em> · </em>
                                <i v-text="item.collectionNum"></i> 人在学习
                            </li>
                        </ul>
                    </a>
                </div>
            </div>
        </div>
        <!--精品推荐1/-->


        <!---->
        <div class="Recommend" id="recommend-1">
            <div class="title-class">
                编程入门
                <div class="course-nav">
                    <span v-bind:class="{ active: Active==0 }" @click="findItems(0)" style="cursor: pointer">热门</span>
                    <span v-bind:class="{ active: Active==1 }" @click="findItems(1)" style="cursor: pointer">初级</span>
                    <span v-bind:class="{ active: Active==2 }" @click="findItems(2)" style="cursor: pointer">中级</span>
                    <span v-bind:class="{ active: Active==3 }" @click="findItems(3)" style="cursor: pointer">高级</span>
                </div>
                <a href="">查看全部</a>
            </div>
            <div class="content">
                <div class="recom-item" v-for="(item,index) in items" @click="link(item.id)">
                    <a href="javascript:void(0)">
                        <p><img :src="item.picture" width="100%" alt=""></p>
                        <ul>
                            <li v-text="item.name"></li>
                            <li>
                                <span v-if="item.level==1">初级</span>
                                <span v-else-if="item.level==2">中级</span>
                                <span v-else-if="item.level==3">高级</span>
                                <em> · </em> <i v-text="item.collectionNum"></i>人在学习
                            </li>
                        </ul>
                    </a>
                </div>
            </div>
        </div>
        <!---->

    </div>
    <!--推荐分组/-->

    <!--侧边分组导航-->
    <div class="index-cont-nav">
        <div id="myNavbar" class="collapse navbar-collapse ">
            <div id="myCollapse" class="collapse navbar-collapse">
                <div class="logo-ico"><img src="${base}/img/asset-logoIco.png" alt=""></div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#a">编程入门</a></li>
                    <li><a href="#b">数据分析师</a></li>
                    <li><a href="#c">机器学习工程师</a></li>
                    <li><a href="#d">前端开发工程师</a></li>
                    <li><a href="#e">人工智能工程师</a></li>
                    <li><a href="#f">全栈工程师</a></li>
                    <li><a href="#g">iOS工程师</a></li>
                    <li><a href="#h">VR开发者</a></li>
                    <li><a href="#i">深度学习</a></li>
                    <li><a href="#j">商业预测分析师</a></li>
                    <li><a href="#k">Android开发工程师</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--侧边分组导航/-->
</div>

<!-- 页面底部 -->
<div class="gotop">
    <a href="#"><i class="glyphicon glyphicon-pencil"></i><span class="hide">问题反馈</span></a>
    <a href="#top"><i class="glyphicon glyphicon-plane"></i><span class="hide">返回顶部</span></a>
</div>
<!--底部版权-->
<#include "footer.ftl">

<!-- 页面 css js -->
<script type="text/javascript" src="${base}/plugins/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="${base}/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${base}/js/vuejs-2.5.16.js"></script>
<script src="${base}/js/axios-0.18.0.js"></script>
<script>

    //加载精品课程列表（10个）
    function getCourseByWeight() {
        $.ajax({
            type: "GET",
            url: "${base}/course/find",
            contentType: 'application/json; charset=utf-8',
            data: {
                pageSize: 10,
                orderBy: 'weight'
            },
            success: function (m) {
                var h = '';
                $.each(m.data, function (i, val) {
                    h += '<div class="recom-item">' +
                            '<a href="${base}/course/info/' + val.id + '"  target="_blank">\n' +
                            ' <p><img src="' + val.picture + '" width="100%" alt="' + val.name + '">\n' +
                            '    <span class="lab">HOT</span>\n' +
                            ' </p>\n' +
                            '    <ul>\n' +
                            '       <li>' + val.name + '</li>\n' +
                            '       <li><span>' + val.level + '</span> <em> · </em> ' + val.collectionNum + '人在学习</li>\n' +
                            '    </ul>\n' +
                            '</a></div>';
                });
                $("#recommend").html(h);

            }
        })
    }


    $(document).ready(function () {

        $('#${page}').addClass('active');
        // 在这里写你的代码...

        //加载轮播图
        //getPictureCarousel();
        //加载推荐分类
        //getClassify();
        //加载精品课程列表
        //getCourseByWeight();


    });
</script>

<script type="text/javascript" src="${base}/js/widget-travel-index-nav.js"></script>

<script type="text/javascript">
    //开始滚动轮播图
    function startRoll() {
        var tg = $('.banner-item .item');
        var num = 0;
        for (i = 0; i < tg.length; i++) {
            $('.indicators').append('<span></span>');
            $('.indicators').find('span').eq(num).addClass('active');
        }

        function roll() {
            tg.eq(num).animate({
                'opacity': '1',
                'z-index': num
            }, 1000).siblings().animate({
                'opacity': '0',
                'z-index': 0
            }, 1000);
            $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
            if (num >= tg.length - 1) {
                num = 0;
            } else {
                num++;
            }
        }

        $('.indicators').find('span').click(function () {
            num = $(this).index();
            roll();
        });
        var timer = setInterval(roll, 3000);
        $('.banner-item').mouseover(function () {
            clearInterval(timer)
        });
        $('.banner-item').mouseout(function () {
            timer = setInterval(roll, 3000)
        });
    }
</script>
<script>

    $('.teach-item').hover(function () {
        $(this).find('.teach-info').animate({
            'height': '100%'
        }, 500);
    }, function () {
        $(this).find('.teach-info').animate({
            'height': '112px'
        }, 500);
    });


    $('.gotop a').hover(function () {
        $(this).find('span').removeClass('hide')
    }, function () {
        $(this).find('span').addClass('hide')
    })

</script>

<script src="${base}/js/page-learing-index.js"></script>
<script src="${base}/js/index.js"></script>

</body>
</html>
